<template>
	<div class="loginContainer" >
		
		<!-- <input type="text" v-on:keyup.13="login()" />
		<input type="text" @keyup.13="login()" /> -->
		<div class="formContainer">
			<el-form :model="loginForm" :rules="rules" ref="loginForm">
				<div class="title">东软颐养中心管理系统</div>
				<el-form-item  prop="username">
					<el-input class="inp" 	@keyup.13.native="login()"   clearable v-model="loginForm.username" placeholder="请输入用户名" style="width: 400px;">
					</el-input>
				</el-form-item>
				<!-- @keyup.enter="login()" -->
				<el-form-item  prop="password">
					<el-input class="inp" clearable  v-model="loginForm.password"show-password  placeholder="请输入密码" 
					style="width: 400px;"
				
					@keyup.13.native="login()"
					>
					</el-input>
				</el-form-item>
				<div class="btnContainer">
					<el-button type="primary" round style="width:70%;letter-spacing: 50;" @click="login()">登录</el-button>
				</div>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				loginForm: {
					username: '',
					password: ''
				},
				token: '',
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			//登录验证
			login() {
					// alert("login")
				  this.$refs['loginForm'].validate((valid) => {
				  if (valid) {
					
					//请求网络
					let url = '/api/login';
					this.http.get(url, (token) => {
						console.log("token:", token);
						// alert("token:"+token)
						//将token放到store对象中
						this.$store.commit('setToken', token)
						//登录成功之后跳转到 /home
						this.$router.push({
							path: '/'
						})
						//
					}, this.loginForm)
					
					
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
				
			}
		}
	}
</script>

<style scoped>
	.loginContainer {
		display: flex;
		width: 100vw;
		height: 100vh;
		/* background-color: #00FFFF; */
		justify-content: center;
		align-items: center;
	}


	.formContainer {
		width: 400px;
		height: 270px;
		border: 1px solid #ebebeb;
		border-radius: 3px;
		transition: .2s;
		padding: 20px;
		box-shadow: 2px 2px 10px #06C;
	}

	.title {
		font-size: 30px;
		margin-bottom: 20px;
		text-align: center;

	}


	.inp {
		margin-bottom: 10px;
	}


	.btnContainer {
		display: flex;
		justify-content: center;
	}
</style>
